<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <view class="bg-white">
  <!-- 日历 -->
  <CalendarSelect :rightnow="true" @change="chooseDay"></CalendarSelect>
  <view v-for="(item,index) in scheduleList" :key="index">
    <view :class="`bg-`+getColor(item.start,item.end)" class="margin padding radius-lg">
      <view class="flex flex-sub justify-between">
        <view class="text-bold text-xl">
          {{ myMoment(item.start).format('MMMDo HH:mm') }} - {{ myMoment(item.end).format('HH:mm') }}
        </view>
        <view>
          {{ getStatus(item.start, item.end) }}
        </view>
      </view>
      <view class="flex flex-sub flex-direction justify-between margin-top-xs">
        <view class="text-df">
          预约人数：{{ item.appointmentNum }}
        </view>
        <view class="text-df">
          医院：{{ item.hospital }}
        </view>
      </view>
      <view class="solids-top padding-top margin-top flex flex-sub justify-between ">
        <view class="flex flex-sub flex-direction padding-lr">
          <button class="cu-btn" @click="toAppointment(item)">查看预约</button>
        </view>
        <view class="flex flex-sub flex-direction padding-lr">
          <button class="cu-btn" @click="toClockin(item)">工作打卡</button>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script setup lang="ts">
import CalendarSelect from "@/pages/nurse/schedule/components/calendar/CalendarSelect.vue";
import api from "@/api";
import myMoment from "@/utils/common/myMoment";
import {ref} from "vue";
import MrCustom from "@/components/common/MrCustom.vue";


const scheduleList = ref([])
const andParams = ref({})
const orParams = ref({})
const orderParams = ref({})


const toAppointment =(item:any)=>{
  uni.navigateTo({
    url: '/pages/nurse/appointment/list?e=1'
  })
}

const toClockin = (item: any) => {
  if(myMoment().isAfter(myMoment(item.start).startOf('day'))){
    uni.navigateTo({
      url: '/pages/nurse/schedule/clockin/clockin?scheduleInfo=' + encodeURIComponent(JSON.stringify(item))
    })
  }else{
    uni.showToast({
      title:'当天可打卡',
      icon:'error'
    })
  }

}

const chooseDay = (e: string) => {
  console.log('日历选择:', e)
  getScheduleList(e)
}
const getScheduleList = (e: any) => {
  api.schedule.betweenSelf({
    start: myMoment(e).startOf('day').format("yyyy-MM-DD HH:mm:ss"),
    end: myMoment(e).endOf('day').format("yyyy-MM-DD HH:mm:ss"),
    andParams: JSON.stringify(andParams.value),
    orParams: JSON.stringify(orParams.value),
    orderParams: JSON.stringify(orderParams.value),
    pageNo: 1,
    pageSize: 999,
  }).then(res => {
    if (res && res.data.code === 0) {
      scheduleList.value = res.data.data.records;
    }
  })
}

const getColor = (start: any, end: any) => {
  if (myMoment().isBetween(start, end)) {
    return "green"  //正在进行
  } else if (myMoment().isBefore(start)) {
    return "blue"  //未开始
  } else {
    return "red"  //已经过了
  }
}
const getStatus = (start: any, end: any) => {
  if (myMoment().isBetween(start, end)) {
    return "进行中"  //正在进行
  } else if (myMoment().isBefore(start)) {
    return "未开始"  //未开始
  } else {
    return "已结束"  //已经过了
  }
}
</script>

<style scoped>
.card {
  box-shadow: 1px 1px 10px #888888;
  padding: 10px;
  margin: 30px;
  border-radius: 5px;
}

</style>